<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>refs</title>
  </head>

  <body>
    <!--  -->
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <div id="test2"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>
    <!-- <script src="./change_weather.js"></script> -->
  </body>
  <script src="./js/prop-types.js"></script>
  <script type="text/babel">
    class Life extends React.Component {
      state = {
        opacity: 1,
      };
      death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        // 这样是可以的
        // clearInterval(this.timer);
      };
      // 生命周期函数都是react实例调用的，所以this就是react实例的this
      //   组件挂载完成
      componentDidMount() {
        // console.log('test');
        let { opacity } = this.state;
        this.timer = setInterval(() => {
          opacity -= 0.1;
          if (opacity <= 0) {
            opacity = 1;
          }
          this.setState({ opacity });
        }, 200);
      }
      componentWillUnmount(){
        clearInterval(this.timer)
      }
      component
      render() {
        console.log("render");
        let { opacity } = this.state;
        // 2000ms减少100%就等于200ms减少10%
        // 定时器一定要记得清除
        /* timer=null;
        let timer;
        timer=setInterval(() => {
        // 这种方式也可以每一次setState又会调用一次render
        // setTimeout(() => {
          opacity -= 0.1;
          if (opacity <= 0) {
            opacity = 1;
          }
          this.setState({ opacity });
        }, 200); */
        return (
          <div>
            <h1 style={{ opacity: opacity }}>请搞定react</h1>
            <button onClick={this.death}>卸载组件</button>
          </div>
        );
      }
    }
    ReactDOM.render(<Life />, document.getElementById("test"));
  </script>
</html>
